import { Popconfirm, Popover, Switch } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';

const columnConfig = {
  sort: {
    name: '序号',
    code: 'sort',
    width: 60,
    render(v, r, i) {
      return i + 1;
    }
  },
  account: {
    name: "账号",
    code: "account",
    width: 120
  },
  name: {
    name: "员工姓名",
    code: "name",
    width: 100
  },
  mobile: {
    name: "联系手机号",
    code: "mobile",
    width: 120,
    render: t => <span className='common-color3'>{t}</span>
  },
  roleNames: {
    name: "角色",
    code: "roleNames",
    width: 260,
  },
  changeSupplier: {
    title: (
      <div>
        更换供应商
        <Popover content={<div>开关打开后，允许对应拿货员角色权限<br />拿货时拥有换其他厂家商品权限</div>}>
          <QuestionCircleOutlined style={{ marginLeft: '4px', cursor: 'pointer', color: '#999' }} />
        </Popover>
      </div>
    ),
    code: "changeSupplier",
    width: 260,
  },
  opera: {
    name: "操作",
    code: "roleNames",
    width: 80,
  },
}

//渲染操作列
const RenderOpera = ({ handleOpera, record }) => {
  return (
    <span className="opera-span-common">
      <span onClick={() => handleOpera('edit', record)}>编辑</span>
      <i>|</i>
      <Popconfirm
        title="确定要删除吗?"
        onConfirm={() => handleOpera('del', record)}
        okText="确定"
        cancelText="取消"
      >
        <span>删除</span>
      </Popconfirm>
    </span>
  )
}

//渲染供应商开关
const RenderSupplierBtn = ({ handleOpera, record }) => {
  const arr = record.roleNames?.split(',');
  if(arr.includes('拿货员')) {
    return (
      <Popconfirm
        title={record.checked ? "确认关闭该拿货员的换货权限吗?" : "确认开启该拿货员的换货权限吗?"}
        onConfirm={() => handleOpera('switch', record)}
        okText="确定"
        cancelText="取消"
      >
        <Switch checkedChildren="开启" checked={record.changeSupplier ? true : false} unCheckedChildren="关闭" />
      </Popconfirm>
    )
  }
  return '/'
}

//获取列数据
export const getColumns = ({ handleOpera }) => {
  const arr = [];
  Object.keys(columnConfig).map(v => {
    const item = columnConfig[v];
    if (v == 'opera') {
      item.render = (t, r) => <RenderOpera handleOpera={handleOpera} record={r} />;
    } else if(v == 'changeSupplier') {
      item.render = (t, r) => <RenderSupplierBtn handleOpera={handleOpera} record={r} />;
    }
    arr.push(item);
  })
  return arr;
}